<template>
  <v-container grid-list-lg pa-0>
    <v-layout wrap>
      <v-flex sm6 xs12 md6 lg3 v-for="item in panels" :key="item.name">
        <v-card class="ma-3">
          <v-list-item>
            <v-list-item-avatar tile class="mt-n7">
              <v-sheet :color="item.iconColor" width="43" height="45" elevation="10">
                <v-icon dark large>{{ item.icon }}</v-icon>
              </v-sheet>
            </v-list-item-avatar>
            <v-list-item-content>
              <div class="text-center text-h5">{{ item.name }}</div>
              <v-list-item-title class="headline mb-1 text-center">
<!--                {{ item.value }}-->
                <countTo :startVal='0' :endVal='item.value' :duration='3000'></countTo>
              </v-list-item-title>
              <div>
                <v-divider></v-divider>
              </div>
            </v-list-item-content>
          </v-list-item>
        </v-card>
      </v-flex>
      <!-- -->
<!--      <v-flex-->
<!--          xs12-->
<!--          lg3-->
<!--      >-->
<!--        <v-basic-card-->
<!--            title="职位城市分析"-->
<!--            toolbar-height="56"-->
<!--        >-->
<!--          <template slot="card-content">-->
<!--&lt;!&ndash;            <left-chart/>&ndash;&gt;-->
<!--          </template>-->
<!--        </v-basic-card>-->
<!--      </v-flex>-->

<!--      第一行-->
      <v-flex xs12 lg12 >
        <v-basic-card
            title="词汇-话题知识图谱"
            toolbar-height="56"
        >
          <template slot="card-content">
            <bar-base-chart />
          </template>
        </v-basic-card>
      </v-flex>

<!--      第二行-->
      <!-- 中国地图 -->
      <v-flex
          xs12
          lg6
      >
        <v-basic-card
            title="考研旱涝地"
            toolbar-height="56"
        >
          <template slot="card-content">
            <data-map
                ref="dataMap"
                title=""
                :list="mapDataList"
                style="width: 100%; height: 100%; height:400px;"
            />
          </template>
        </v-basic-card>
      </v-flex>
      <!-- -->
      <v-flex
          xs12
          lg6
      >
        <v-basic-card
            title="高频词统计"
            toolbar-height="56"
        >
          <template slot="card-content">
            <word-cloud/>
          </template>
        </v-basic-card>
      </v-flex>

      <!--第三行-->
      <v-flex xs12 lg12 >
        <v-basic-card
            title="词性考频分析"
            toolbar-height="56"
        >
          <template slot="card-content">
            <left-chart/>
          </template>
        </v-basic-card>
      </v-flex>

<!--      第四行-->
      <v-flex
          xs12
          lg6
      >
        <v-basic-card
            title="不同等级高频词数量趋势"
            toolbar-height="56"
        >
          <template slot="card-content">
            <VocabularyLineChart />
          </template>
        </v-basic-card>
      </v-flex>
      <!-- -->
      <v-flex
          xs12
          lg6
      >
        <v-basic-card
            title="初级词汇统计"
            toolbar-height="56"
        >
          <template slot="card-content">
            <PlotWordCloud level="elementary" />
          </template>
        </v-basic-card>
      </v-flex>
      <!--第五行 -->
      <v-flex
          xs12
          lg6
      >
        <v-basic-card
            title="中高级词汇统计"
            toolbar-height="56"
        >
          <template slot="card-content">
            <PlotWordCloud level="upper_intermediate" />
          </template>
        </v-basic-card>
      </v-flex>
      <!-- -->
      <v-flex
          xs12
          lg6
      >
        <v-basic-card
            title="高级词汇统计"
            toolbar-height="56"
        >
          <template slot="card-content">
            <PlotWordCloud level="advanced" />
          </template>
        </v-basic-card>
      </v-flex>

      <!--第六行 -->
      <v-flex
          xs12
          lg12
      >
        <v-basic-card
            title="试题难度分析"
            toolbar-height="56"
        >
          <template slot="card-content">
            <RightChart/>
          </template>
        </v-basic-card>
      </v-flex>




    </v-layout>
  </v-container>
</template>

<script>
import DataMap from "@/components/DataMap";
import LeftChart from "./charts/LeftChart";
import RightChart from "./charts/RightChart"
import BarBaseChart from "../Dash1/charts/BarBaseChart";
// import BarBaseChart2 from "../Dash1/charts/BarBaseChart2";
import {getPanel} from "../../../api/job";
import countTo from 'vue-count-to';
import WordCloud from "@/views/Charts/Dash3/WordCloud.vue";
import PlotWordCloud from "@/views/Charts/Dash3/PlotWordCloud.vue";
import VocabularyLineChart from "@/views/Charts/Dash1/charts/VocabularyLineChart.vue";


export default {
  name: "Dash1",
  components: {
    DataMap, LeftChart,
    RightChart,
    BarBaseChart,WordCloud,PlotWordCloud,VocabularyLineChart,
    // BarBaseChart2,
    countTo
  },
  async mounted() {
    await getPanel().then(res => {
      // console.log(res.data.data)
      this.panels[0].value = res.data.data.data1
      this.panels[1].value = res.data.data.data2
      this.panels[2].value = res.data.data.data3
      this.panels[3].value = res.data.data.data4
    })

    // await getCityJob().then(res => {
    //   console.log(res)
    //   this.mapDataList = res.data.data
    // })
  },
  data: () => ({
    mapDataList: [
      { "name": "山东", "value": 35.5 },
      { "name": "江苏", "value": 25.2 },
      { "name": "广东", "value": 21.26 },
      { "name": "四川", "value": 20.8 },
      { "name": "辽宁", "value": 12.5 },
      { "name": "安徽", "value": 18.83 },
      { "name": "江西", "value": 12.43 },
      { "name": "浙江", "value": 13.86 },
      { "name": "福建", "value": 8.2 },
      { "name": "黑龙江", "value": 9.54 },
      { "name": "天津", "value": 6.7 },
      { "name": "湖南", "value": 14.92 },
      { "name": "广西", "value": 7.3 },
      { "name": "新疆", "value": 7.57 },
      { "name": "西藏", "value": 0.5 }
    ],
    panels: [{
      'iconColor': 'indigo',
      'icon': 'movie',
      'name': '职位数',
      'value': 0
    }, {
      'iconColor': 'deep-purple',
      'icon': 'subscriptions',
      'name': '城市数',
      'value': 0
    }, {
      'iconColor': 'blue',
      'icon': 'star',
      'name': '公司数',
      'value': 0
    }, {
      'iconColor': 'teal darken-1',
      'icon': 'folder_shared',
      'name': '职位类型',
      'value': 0
    }],
  })
}
</script>

<style scoped>

</style>
